@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toggles';

$sizes: 's', 'm';

@mixin container($component) {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;

  @each $size in $sizes {
    &[data-size='#{$size}'] {
      @include composite-var($toggles, $size, $component, 'container');
    }
  }

  &[data-focusvisible=true] {
    @include outline-var($container-focused-s);
    &[data-size='s'] {
      outline-offset: simple-var($theme-variables, 'border-width', 'state-focus', 's');
    }
  }
}
